<template>
	<div class="list">
		<!-- 工具条 -->
		<el-col :span="24" class="toolbar">
			<el-input placeholder="请输入内容" v-model="filters.name" class="search">
				<el-button slot="append" icon="el-icon-search" @click="getTableData"></el-button>
			</el-input>
		</el-col>
		<el-table :data="tableData" v-loading="listLoading" stripe>
			<el-table-column prop="requires_id" label="ID" width="50"></el-table-column>
			<el-table-column prop="o_id" label="订单号"></el-table-column>
			<el-table-column prop="product_name" label="盗版对象"></el-table-column>
			<el-table-column prop="product_type_zh" label="分类"></el-table-column>
			<el-table-column prop="unauth_num" label="盗版网站数量"></el-table-column>
			<el-table-column label="操作" width="100">
				<template slot-scope="scope">
					<span class="hover" @click="handleAdd(scope.$index, scope.row)">下架详情</span>
				</template>
			</el-table-column>
		</el-table>
		<!-- 工具条 -->
		<el-col :span="24" class="toolbar" style="padding-top:10px; width:1000px">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
		<!-- 新增 -->
		<el-dialog :title="formAddTitle" :visible.sync="formAddVisible">
			<el-table :data="tableData2" size="small" stripe border style="width: 100%">
				<el-table-column prop="unauth_name" label="盗版标题" width="120"></el-table-column>
				<el-table-column prop="site_name" label="盗版网站" width="120"></el-table-column>
				<el-table-column prop="url" label="盗版网站URL"></el-table-column>
				<el-table-column label="操作" width="60">
					<template slot-scope="scope">
						<span v-if="scope.row.status !=0" class="hover" @click="downAdd(scope.$index,scope.row)">下架</span>
						<span v-else>已下架</span>
					</template>
				</el-table-column>
			</el-table>
			<div class="toolbar clear">
				<el-pagination small layout="prev, pager, next" @current-change="handleCurrentChange2" :page-size="10" :total="total2" style="float:right;">
				</el-pagination>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import { downGetrequireslist,downGetundownlist,downAdd } from '@/api';

	export default {
		data() {
			return {
				// 翻页
				total: 0,
				page: 1,
				total2: 0,
				page2: 1,
				listLoading: false,
				formAddTitle: '监测任务：',

				// 表格
				tableData: [],
				tableData2: [],
				// 添加弹出框
				formAddVisible: false,
				requires_id: null,
				filters: {
					name: '',
				},
			}
		},
		mounted() {
			this.getTableData();
		},
		computed: {
			...mapState([
				'crocUser',
			]),
		},
		methods: {
			...mapMutations([
				'OUT_LOGIN',
			]),
			
			// 翻页 
			handleCurrentChange(val) {
				this.page = val;
				this.getTableData();
			},
			// 翻页 
			handleCurrentChange2(val) {
				this.page2 = val;
				this.getTableData2();
			},
			getTableData(){
				this.listLoading = true;
				let para = {
					uid: this.crocUser.uid,
					name: this.filters.name,
					page: this.page,
					pagesize: 10,
				};
				downGetrequireslist(para).then(res => {
					this.listLoading = false;
					if (res.data) {
						this.total = res.total;
						this.tableData = res.data;
					}else if(res.tologin) {
						this.OUT_LOGIN();
						this.$router.push('/login');
					}else {
						this.$message.error(res.msg);
					}
				});
			},
			getTableData2(){
				let para = {
					uid: this.crocUser.uid,
					requires_id: this.requires_id,
					page: this.page2,
					pagesize: 10,
				};
				downGetundownlist(para).then(res=>{
					if (res.data) {
						this.total2 = res.total;
						this.tableData2 = res.data;
					}else if(res.tologin) {
						this.OUT_LOGIN();
						this.$router.push('/login');
					}else {
						this.$message.error(res.msg);
					}
				})
				
			},

			// 显示添加
			handleAdd(index,row){
				this.formAddTitle = `监测任务：${row.product_name}`;
				this.requires_id = row.requires_id;
				this.getTableData2();
				this.formAddVisible = true;
			},

			// 提交添加
			downAdd(index,row){
				let para = {
					uid: this.crocUser.uid,
					requires_id: row.requires_id,
					unauth_id: row.unauth_id,
				};
				downAdd(para).then(res => {
					if(res.data){
						this.$message.success(res.msg);
						this.getTableData2();
					}else if(res.tologin) {
						this.OUT_LOGIN();
						this.$router.push('/login');
					}else {
						this.$message.error(res.msg);
					}
				})
			},
			// 重置 
			resetForm(formName){
				this.$refs[formName].resetFields();
			},
		}
	}

</script>

<style scoped lang="scss">
</style>